import React, { useState, useRef, useEffect } from 'react';
import './index.scss'
import { Button, Form, Select, Input, notification } from 'antd';
import { FormOutlined, VerticalRightOutlined, DeleteOutlined } from '@ant-design/icons';
import MyTable from '../../../../../components/MyTable';
import * as XLSX from 'xlsx'
import fs from 'file-saver'
import { useNavigate } from 'react-router-dom';
import service from '../../../../../api'
const AddNeed = () => {
    var history = useNavigate()
    var [dataList, setdataList] = useState([])
    var excelExport = (table: any, filename: any) => {

        // 解析dom元素
        const wb = XLSX.utils.table_to_book(table)

        /* Export to file (start a download) */
        const defaultCellStyle = {
            font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
            fill: { fgColor: { rgb: 'FFFFAA00' } },
        }

        const wopts: any = {
            bookType: 'xlsx',
            bookSST: false,
            type: 'binary',
            cellStyle: true,
            defaultCellStyle: defaultCellStyle,
            showGridLines: false,
        }

        //生成xlsx格式的数据
        const wbout = XLSX.write(wb, wopts)

        var data: any = [s2ab(wbout)];

        //转换成二进制Blob类型的数据
        const blob = new Blob(data, { type: 'application/octet-stream' })

        //文件另存为
        fs.saveAs(blob, filename + '.xlsx')
    }
    var s2ab = (s: any) => {
        if (typeof ArrayBuffer !== 'undefined') {
            const buf = new ArrayBuffer(s.length);
            const view = new Uint8Array(buf);
            for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
            return buf;
        } else {
            const buf = new Array(s.length);
            for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
            return buf;
        }
    }
    var handleExcelExport = () => {
        var table = document.querySelector('table');
        excelExport(table, 'download.xlsx');
    }
    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };
    var columns: any = [
        {
            title: "序号",
            key: "id",
            dataIndex: "id",
        },
        {
            title: "单号",
            dataIndex: "productId",
            key: 'productId'
        },
        {
            title: "产品线",
            dataIndex: "productLine",
            key: "productLine",
        },
        {
            title: "部门",
            key: "dept",
            dataIndex: "dept",
        },
        {
            title: "重量",
            dataIndex: "cargoWeight",
            key: 'cargoWeight'
        },
        {
            title: "数量",
            key: "cargoNumber",
            dataIndex: "cargoNumber",
        },
        {
            title: "来货重量",
            dataIndex: "purchaseWeight",
            key: 'tabPerson'
        },
        {
            title: "来货数量",
            dataIndex: "purchaseNumber",
            key: 'tabPerson'
        },
        {
            title: "制单人",
            dataIndex: "tabPerson",
            key: 'tabPerson'
        },
        {
            title: "仓库",
            dataIndex: "warehouse",
            key: 'warehouse'
        },
        {
            title: "成色",
            dataIndex: "roductQuality",
            key: 'roductQuality'
        },
    ]
    useEffect(() => {
        requestList()
    }, [])
    var requestList = async () => {
        var res = await service.cxl.requireList()
        res.data.data.forEach((item: any, index: any) => {
            item.key = index
        })
        setdataList(res.data.data)
    }
    const onFinish = async (values: any) => {
        values.requireId = 3
        values.distributeId = 3
        values.cargoWeight = 5
        values.cargoNumber = 5
        values.checkPerson = '小惠惠'
        values.purchaseDept = '精品柜A'
        var res = await service.cxl.Addrequire(values)
        if (res.data.code == 200) {
            notification.success({ message: '添加成功!' });
            var newList = JSON.parse(JSON.stringify(dataList))
            newList.push(values)
            newList.forEach((item: any, index: any) => {
                item.key = index
            })
            setdataList(newList)
        }
    }
    const goBack = () => {
        history(-1)
    }
    return (

        <div className='addneed'>
            <Form
                className='form'
                onFinish={onFinish}
                {...layout}
            >
                <div className='title'>
                    <span className='text'>新增需求单</span>
                    <span className='btn'>
                        <Button>保存</Button>

                        <Button type="primary" htmlType="submit"><FormOutlined />提交</Button>

                        <Button type="primary" onClick={goBack}><VerticalRightOutlined />取消</Button>

                    </span>
                </div>
                <div className='text1'>
                    基本信息
                </div>
                <div className='items'>

                    <Form.Item
                        style={{ width: '30%' }}
                        label="产品线："
                        name="productLine"
                        rules={[{ required: true, message: '请选择产品线' }]}
                    >
                        <Select

                            options={[
                                { value: '采购入库', label: '采购入库' },
                                { value: '退货入库', label: '退货入库' },
                            ]}
                        />
                    </Form.Item>


                    <Form.Item
                        style={{ width: '30%' }}
                        label="品类"
                        name="type"
                        rules={[{ required: true, message: '请选择品类' }]}
                    >
                        <Select
                            options={[
                                { value: '首饰', label: '首饰' },
                                { value: '金条', label: '金条' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        style={{ width: '30%' }}
                        label="仓库"
                        name="warehouse"
                        rules={[{ required: true, message: '请选择仓库' }]}
                    >
                        <Select

                            options={[
                                { value: '黄金首饰A仓库', label: '黄金首饰A仓库' },
                                { value: '黄金首饰B仓库', label: '黄金首饰B仓库' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="制单人"
                        name="tabPerson"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="部门"
                        name="dept"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="成色"
                        name="roductQuality"
                        rules={[{ required: true, message: '请选择成色' }]}
                        style={{ width: '30%' }}
                    >
                        <Select


                            options={[
                                { value: '足金999', label: '足金999' },
                                { value: '足金9999', label: '足金9999' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="采购数量"
                        name="purchaseNumber"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="采购重量"
                        name="purchaseWeight"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="单号"
                        name="productId"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                </div>

            </Form>
            <div className='table'>
                <div className='title1'>
                    <div className='text1'>
                        产品信息
                    </div>
                    <div>
                        <Button onClick={handleExcelExport}>导出</Button>
                    </div>
                </div>

                <MyTable data={dataList} columns={columns} />
            </div>
        </div >
    );
};

export default AddNeed;